
<template>
  <div class="search-layout">
    <div class="container box-width clearfix search-setion search-car-layout">
      <form>
        <div class="form-group clearfix row">
          <div class="col-4 item">
            <label class="label" for="exampleInputEmail1">品牌</label>
            <div class="input-box">
              <select class="js-example-basic-multiple brand-select form-control" name="supplierId">
                <option value="AL">Alabama</option>
                <option value="WY">Wyoming</option>
              </select>
            </div>
          </div>
          <div class="col-4 item">
            <label class="label" for="exampleInputEmail1">国家</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="国家">
            <i class="glyphicon glyphicon-triangle-bottom"></i>
          </div>
        </div>
        <div class="form-group clearfix row">
          <div class="col-4 item">
            <label class="label" for="">取车日期</label>
            <input type="email" class="form-control pickup-date" id="" placeholder="取车日期">
            <i class="glyphicon glyphicon-triangle-bottom"></i>
          </div>
          <div class="col-4 item">
            <label class="label" for="">取车时间</label>
            <input type="email" class="form-control pickup-time" id="" placeholder="取车时间">
            <i class="glyphicon glyphicon-triangle-bottom"></i>
          </div>
          <div class="col-4 item">
            <label class="label" for="exampleInputEmail1">取车地点</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            <i class="glyphicon glyphicon-triangle-bottom"></i>
          </div>
        </div>
        <div class="form-group clearfix row">
          <div class="col-4 item">
            <label class="label" for="">还车日期</label>
            <input type="email" class="form-control return-date" id="" placeholder="还车日期">
            <i class="glyphicon glyphicon-triangle-bottom"></i>
          </div>
          <div class="col-4 item">
            <label class="label" for="">还车时间</label>
            <input type="email" class="form-control return-time" id="" placeholder="还车时间">
            <i class="glyphicon glyphicon-triangle-bottom"></i>
          </div>
          <div class="col-4 item">
            <label class="label" for="exampleInputEmail1">还车地点</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            <i class="glyphicon glyphicon-triangle-bottom"></i>
          </div>
        </div>
        <div class="form-group clearfix row">
          <div class="col-4 item">
            <label class="label" for="">套餐名称</label>
            <div class="input-box">
              <select class="js-example-basic-multiple package-type form-control" name="supplierId">
                <option value="AL">Alabama</option>
                <option value="WY">Wyoming</option>
              </select>
            </div>
          </div>
          <div class="col-4 item">
            <label class="label" for="">租车人年龄</label>
            <div class="input-box">
              <select class="js-example-basic-multiple drive-age form-control" name="supplierId">
                <option value="AL">Alabama</option>
                <option value="WY">Wyoming</option>
              </select>
            </div>
          </div>
          <div class="col-4 item">
            <label class="label" for="">付款方式</label>
            <div class="input-box">
              <select class="js-example-basic-multiple pay-type form-control" name="type">
                <option value="AL">Alabama</option>
                <option value="WY">Wyoming</option>
              </select>
            </div>
          </div>
        </div>

        <div class="tips">
          <p>* 取、还车以当地时间为准</p>
          <p>* 所示价格只适合中国、香港、澳门地区的护照和驾照持有者</p>
          <p>* 若预付订单客户提前还车，未使用天数不予退款</p>
          <p>* 浮动价将不定时更新，常规价为常年适用价格</p>
          <p>* 服务热线：+86-21-63758388</p>
        </div>
        <table class="table text-center">
          <thead>
            <tr>
              <th>套餐名称</th>
              <th>不限里程</th>
              <th>碰撞免责条款(车损险)</th>
              <th>延伸保险(第三方责任险)</th>
              <th>中文GPS导航仪</th>
              <th>燃油政策(赠送第一通燃油)</th>
              <th>税金/一般附加费</th>
              <th>额外4名驾驶员</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="font-size: 14px;">畅游基本计划</td>
              <td>Y</td>
              <td>Y</td>
              <td></td>
              <td></td>
              <td></td>
              <td>Y</td>
              <td>Y</td>
            </tr>
            <tr>
              <td style="font-size: 14px;">无忧自驾计划</td>
              <td>Y</td>
              <td>Y</td>
              <td>Y</td>
              <td></td>
              <td></td>
              <td>Y</td>
              <td>Y</td>
            </tr>
            <tr>
              <td style="font-size: 14px;">尊尚自驾计划<span style="display: block;">(最低租赁4天起)</span></td>
              <td>Y</td>
              <td>Y</td>
              <td>Y</td>
              <td>Y</td>
              <td>Y</td>
              <td>Y</td>
              <td>Y</td>
            </tr>
            <tr>
              <td style="font-size: 14px;">增值套餐C</td>
              <td>Y</td>
              <td>Y</td>
              <td>Y</td>
              <td>Y</td>
              <td></td>
              <td>Y</td>
              <td>Y</td>
            </tr>
          </tbody>
        </table>
        <div class="text-center">
          <button type="submit" class="btn btn-default ft-btn search-btn">搜索</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'search',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
